<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:jsf="http://xmlns.jcp.org/jsf"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Meteo Calendar</title>
        <h:outputStylesheet name="css/jsfcrud.css"/>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <h:outputStylesheet library="css" name="style.css"  />
        <h:outputStylesheet library="css" name="font.css"/> 
        <h:outputScript library="js" name="ld.js"/>
    </h:head>
    <h:body>


        <div class="main">
            <div class="header" >
                <h1>Login or Create a Free Account!</h1>
            </div>
            
          
            <h:messages></h:messages>
          
            <h:form id="registration"> 
                <ul class="left-form">
                    
                    <h2>New Account:</h2>
                   
                    <li>
                        
                        <input type="text"  jsf:id="name" jsf:value="#{registrationBean.user.name}" placeholder="First Name" required="true">
                            <f:validateLength minimum="3"/>
                            
                        </input>

                        <a href="#" class="icon ticker"> </a>
                        <div class="clear"> </div>
                    </li> 

                    <li>
                        <input type="text" jsf:id="lastname" jsf:value="#{registrationBean.user.lastName}"  placeholder="Last Name" required="true"/>
                        <a href="#" class="icon ticker"> </a>
                        <div class="clear"> </div>
                    </li>

                    <li>
                        <input type="text" jsf:id="email" jsf:value="#{registrationBean.user.email}" placeholder="Email" required="true"/>
                        <a href="#" class="icon ticker"> </a>
                        <div class="clear"> </div>
                    </li> 
                    <li>
                        <input type="password" jsf:id="password" jsf:value="#{registrationBean.user.password}"  placeholder="password" required="true"/>
                        <a href="#" class="icon into"> </a>
                        <div class="clear"> </div>
                    </li> 
                    <li>
                        <input type="password" jsf:id="password2" jsf:value="#{registrationBean.user.password}"  placeholder="password" required="true"/>
                        <a href="#" class="icon into"> </a>
                        <div class="clear"> </div>
                    </li> 

                    <input type="submit" jsf:id="register"  jsf:action="#{registrationBean.register()}" value="Create Account"/>
                    <div class="clear"> </div>
                </ul>
            </h:form>


                <h:form id="loginForm">
                <ul class="right-form">
                    <h3>Login:</h3>
                    <div>
                        <li><input type="text" jsf:id="uname" jsf:value="#{loginBean.username}" placeholder="Username" required="true"/></li>
                        <li><input type="password" jsf:id="pwd" jsf:value="#{loginBean.password}" placeholder="Password" required="true"/></li>
                        <h4>I forgot my Password!</h4>             
                        <input type="submit" jsf:id="login" jsf:action="#{loginBean.login()}" value="Login" />	
                    </div>        
                    <div class="clear"> </div>
                </ul>
                <div class="clear"> </div>	
                </h:form>             
        </div>

    </h:body>




</html>

